<template>
  <div style="display: flex; justify-content: center">
    <el-popover placement="right" :width="300" trigger="hover">
      <el-image
        :src="url"
        :preview-src-list="[url]"
        preview-teleported
        style="width: 290px; margin: -8px -8px -13px"
      />
      <template #reference>
        <el-image :src="url" />
        <!-- <el-image :src="url" :preview-src-list="[url]" preview-teleported /> -->
      </template>
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
  defineOptions({
    name: 'MyImgPreview',
  })

  const props = defineProps({
    url: {
      type: String,
      default: '',
    },
  })
</script>

<style lang="scss" scoped></style>
